<template>
	<view class="dean_room">
		<scroll-view class="scroll-view_H" scroll-y="true" style="height: calc(100vh - 48rpx);">
			
			<view class="info_room  m-b-16">
				<view class="menuTitle">
					<text>数据统计</text>
					<view class="select_info">
						今日
						<u-icon name="arrow-down"></u-icon>
					</view>
				</view>
				<view class="card_room">
					<view class="card_item" v-for="(item,index) in list" :key="index">
						<view class="card_title" :class="colors[index]">
							<view class="card_icon" :class="colors[index]">{{icons[index]}}
							</view>
							{{item.name}}
						</view>
						<view class="card_main">
							{{item.count}} <text class="card_sub">{{subs[index]}}</text>
						</view>
						<view class="card_com" :class="[item.yearOverYear && item.yearOverYear.indexOf('-') > -1 ? 'down' : '']">
							<text class="card_sub m-r-10">同比</text>
							{{item.yearOverYear ? item.yearOverYear.indexOf('-') > -1 ? '' : item.yearOverYear == 0 ? '' : "+" : ''}}{{item.yearOverYear}}{{item.yearOverYear ? item.yearOverYear.indexOf('-') > -1 ? '↓' : item.yearOverYear == 0? '' : "↑" : ''}}
							
						</view>
						<view class="card_total m-t-10">
							<text class="card_sub">当年累计</text>
							{{item.sumCurrentYear}}
							<text class="card_sub">{{subs[index]}}</text>
						</view>
					</view>
				</view>
			</view>
			
			<view class="info_tips">注：当年累计及同比均不包括当天数据</view>
			
		</scroll-view>

		<!--  -->
		<u-action-sheet :actions="options" :show="show" :closeOnClickAction="true"
			@select="selectClick"></u-action-sheet>
	</view>
</template>

<script>
	import { getOperationViewIndex } from '@/api/deanInquiry'
	export default {
		components: {
			
		},
		data() {
			return {
				
				options: [{
					name: '今日',
					id: '1'
				}],
				show:false,
				list:[],
				icons:['门','急','住','住','住','危','术','术','技','技'],
				colors:['','fen','red','red','red','cheng','zi','zi','lu','lu'],
				subs:['人','人','人','人','人','人','台','台','人','项']
			}
		},
		onLoad(options) {
			this.getData()
		},
		methods: {
			getData() {
				getOperationViewIndex({
					datePattern: 0
				}).then(res => {
					console.log(res, '-------res-------------')
					this.list = res.data
				})
			},
			selectClick(val) {
				console.log(val, 'val')
				this.show = false
			},
			
		}
	}
</script>

<style lang="scss" scoped>
	.dean_room {
		width: 100%;
		height: 100vh;
		background: rgba(241, 245, 248, 1); //linear-gradient(0deg, rgba(255, 255, 255, 0) 69.44%, rgba(241, 245, 248, 1) 100%);
		padding: 24rpx;
		.info_tips{
			color:#ED9164;
			font-size:24rpx;
		}
		.info_room {
			background-color: #fff;
			border-radius: 10rpx;
			padding: 24rpx 28rpx;

			.menuTitle {
				font-size: 36rpx;
				font-weight: 800;
				margin-bottom: 20rpx;
				display: flex;
				justify-content: space-between;

				.select_info {
					border: 1px solid #ddd;
					border-radius: 5px;
					font-weight: 400;
					font-size: 14px;
					width: 140rpx;
					height: 48rpx;
					line-height: 48rpx;
					padding: 0 8rpx;
					display: flex;
					justify-content: space-between;
				}
			}

			.menuRoom {
				display: flex;
				flex-wrap: wrap;
				align-items: center;
			}

			.menuItem {
				width: calc(100% / 4);
				text-align: center;
				height: 130rpx;
			}

			.card_room {
				display: flex;
				justify-content: space-between;
				flex-wrap: wrap;
				gap: 12rpx;

				.card_item {
					width: calc(50% - 12rpx);
					height: 240rpx;
					border-radius: 10rpx;
					background: rgb(252, 252, 252);
					border: 1px solid rgb(221, 221, 221);

					.card_title {
						height: 74rpx;
						background: rgb(237, 242, 253);
						box-shadow: 0px 1rpx 0rpx rgb(221, 221, 221);
						text-align: center;
						line-height: 74rpx;
						font-size: 28rpx;
						font-weight: 800;
						position: relative;
						&.red {
							background: rgba(253, 240, 240);
						}
						
						&.zi {
							background: rgba(242, 240, 253, 1);
						}
						
						&.lu {
							background: rgba(229, 249, 248, 1);
						}
						&.fen {
							background: rgba(251, 236, 244, 1);
						}
						&.cheng {
							background: rgba(251, 241, 237, 1);
						}
						.card_icon {
							position: absolute;
							width: 49rpx;
							height: 36rpx;
							border-radius: 0px 20rpx 20rpx 0px;
							background: #4E79ED;
							font-size: 24rpx;
							font-weight: 500;
							color: #fff;
							line-height: 36rpx;
							left: -16rpx;
							top: 12px;

							&::before {
								position: absolute;
								display: block;
								bottom: -5px;
								content: '';
								width: 14rpx;
								height: 10rpx;
								background-repeat: no-repeat;
								background-image: linear-gradient(215deg, #3053B3 50%, #fff 50%);
							}

							&.red {
								background: #ED6969;

								&::before {
									background-image: linear-gradient(215deg, #B83333 50%, #fff 50%);
								}
							}

							&.zi {
								background: #8168ED;

								&::before {
									background-image: linear-gradient(215deg, #472EB3 50%, #fff 50%);
								}
							}

							&.lu {
								background: #00BFB8;

								&::before {
									background-image: linear-gradient(215deg, #047572 50%, #fff 50%);
								}
							}
							&.fen{
								background:#ED5FA8;
								&::before {
									background-image: linear-gradient(215deg, #BA2371 50%, #fff 50%);
								}
							}
							&.cheng{
								background:#ED9164;
								&::before {
									background-image: linear-gradient(215deg, #B85B2C 50%, #fff 50%);
								}
							}
						}
					}

					.card_main {
						font-size: 42rpx;
						font-weight: 600;
						color: #04203D;
						text-align: center;
						padding: 16rpx 0 10rpx;
					}

					.card_sub {
						font-size: 24rpx;
						font-weight: 600;
						color: #7E8B9B;
					}

					.card_com {
						text-align: center;
						color: #ED6969;
						font-size: 24rpx;
						font-weight: 600;

						&.down {
							color: #00BFB8;
						}
					}

					.card_total {
						text-align: center;
						color: #04203D;
						font-size: 24rpx;
						font-weight: 600;

					}
				}
			}
			.progress_title{
				font-size:28rpx;
				color:#04203D;
				font-weight: 600;
			}
			.progress_room{
				display: flex;
				justify-content: space-between;
				align-items: center;
				.progress_line{
					width:calc(100% - 100rpx);
				}
				.progress_text{
					width: 100rpx;
					font-size:36rpx;
					color:#04203D;
					text-align:right;
					.progress_icon{
						font-size:24rpx;
						color:#7E8B9B
					}
				}
			}
		}
	}
</style>